<template>
  <a-modal
    :maskClosable="maskClosable"
    title="修改数据中心"
    :width="600"
    :visible="visible"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-form-item label="数据中心名称">
          <a-input autocomplete="off" v-model="name" />
        </a-form-item>
        <a-form-item label="ip">
          <a-input autocomplete="off" v-model="ip" />
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>
<script>
import { gPostAction } from '@/api/manage'
export default {
  name: 'AddModal',
  data() {
    return {
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
      model: {},
      name: '',
      ip: '',
      id:'',
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      url: {
        updateDatacenter:'/asset/updateDatacenter',
      },
      maskClosable: false,
    }
  },
  methods: {
    update(d){
      this.name=d.name
      this.ip=d.ip
      this.id=d.id
      this.visible=true
    },
    handleOk(e) {
      this.confirmLoading = true
      const postData = {
        ip: this.ip,
        name: this.name,
        id:this.id,
      }
      gPostAction(this.url.updateDatacenter, postData)
        .then((res) => {
          if (res.success) {
            this.$message.success('操作成功')
            this.$emit('ok')
          }
        })
        .finally(() => {
          this.confirmLoading = false
          this.handleCancel()
        })
    },
    handleCancel(e) {
      this.visible = false
    },
  },
}
</script>
